﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
	<style>
		/* 全局样式 */
		body {
			background-color: #f2f2f2;
			padding: 15px;
			font-family: "Microsoft YaHei", sans-serif;
		}

		/* 表单容器样式 */
		.form-container {
			background-color: #fff;
			padding: 20px;
			border-radius: 5px;
			box-shadow: 0 0 5px rgba(0,0,0,0.1);
			margin-bottom: 15px;
		}

		/* 表单元素样式 */
		.layui-form-label {
			width: auto;
			padding: 9px 10px;
			text-align: right;
		}

		.layui-input-inline {
			margin-right: 15px;
			margin-bottom: 15px;
		}


		/* 表格容器样式 */
		.table-container {
			background-color: #fff;
			padding: 15px;
			border-radius: 5px;
			box-shadow: 0 0 5px rgba(0,0,0,0.1);
		}



		/* 表格行悬停效果 */
		.layui-table tbody tr:hover {
			background-color: #f8f8f8;
		}

		/* 状态标签样式 */
		.status-label {
			padding: 2px 8px;
			border-radius: 3px;
			font-size: 12px;
		}

		.status-open {
			background-color: #FFB800;
			color: #fff;
		}

		.status-audit {
			background-color: #1E9FFF;
			color: #fff;
		}

		.status-close {
			background-color: #FF5722;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="form-container">
		<form class="layui-form" action="" id="baseStoreForm">
			<div class="layui-form-item">

				@* <div class="layui-input-inline"> *@
				@* 	<label class="layui-form-label">日期范围：</label> *@
				@* 	<div class="layui-input-inline" style="width: 300px; display: flex; align-items: center;"> *@
				@* 		<input type="text" autocomplete="off" name="begindate" class="layui-input" id="begindate" placeholder="开始日期" style="width: 120px;"> *@
				@* 		<span class="layui-form-mid" style="padding: 0 5px;">至</span> *@
				@* 		<input type="text" autocomplete="off" name="enddate" class="layui-input" id="enddate" placeholder="结束日期" style="width: 120px;"> *@
				@* 	</div> *@
				@* </div> *@
				@* <button class="layui-btn" lay-submit lay-filter="search">查询</button> *@
				@* <button type="reset" class="layui-btn layui-btn-primary">重置</button> *@
				@* <a href="http://localhost:8075/webroot/decision/view/duchamp?viewlet=sszc.fvs&page_number=1">查看销售退货报表</a> *@
				@* <b><a href="http://localhost:8075/webroot/decision/view/duchamp?viewlet=sszc.fvs&page_number=1" style="color:aqua" target="_blank">查看销售退货报表</a></b> *@
			</div>
		</form>
	</div>

	<div class="table-container">
		<table class="layui-table" id="table_row" lay-filter="table_row"></table>
	</div>

	<script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
	<script>
		layui.use(['table', 'jquery', 'layer', 'form', 'laydate'], function(){
			var table = layui.table;
			var $ = layui.jquery;
			var layer = layui.layer;
			var form = layui.form;
			var laydate = layui.laydate;

			// 初始化日期控件
			laydate.render({
				elem: '#begindate',
				format: 'yyyy-MM-dd',
				theme: '#1E9FFF'
			});
			laydate.render({
				elem: '#enddate',
				format: 'yyyy-MM-dd',
				theme: '#1E9FFF'
			});

			// 初始化表格
			table.render({
				elem: '#table_row',
				id: 'BaseStoretable',
				//url: 'http://localhost:5234/api/PurchaseInvoice/GetPreturnorder',
				url: "@ViewBag.BaseUrl/T7/PurchaseInvoice/GetPreturnorder",
				toolbar: '#toolbarDemo',
				height: '450', // 高度自适应
				cellMinWidth: 80,
				page: true, // 开启分页
				even: true, // 开启隔行背景
				skin: 'line', // 表格风格
				cols: [[
					{ field: 'preturnorderid', width: 80, title: 'ID', sort: true, align: 'center' },
					{ field: 'copynumber', width: 120, title: '跟单编号', align: 'center' },
					{ field: 'documentCode', width: 150, title: '单据编码', align: 'center' },
					{
						field: 'documentState',
						width: 100,
						title: '单据状态',
						align: 'center',
						templet: function(d){
							var status = '';
							var className = '';
							if(d.documentState === "开立") {
								status = '开立';
								className = 'status-open';
							} else if(d.documentState === "审核") {
								status = '审核';
								className = 'status-audit';
							}
							return '<span class="status-label '+className+'">'+status+'</span>';
						}
					},
					{ field: 'supplierName', width: 180, title: '供应商' },
					{ field: 'notereason', width: 150, title: '备注信息' },
					{ field: 'material_code', width: 120, title: '物料编码', align: 'center' },
					{ field: 'returnsNum', width: 100, title: '退货数量', align: 'right' },
					{ field: 'outinNum', width: 100, title: '出库数量', align: 'right' },
					{ field: 'catchNum', width: 100, title: '补收数量', align: 'right' },
					{
						field: 'documentTime',
						width: 160,
						title: '单据日期',
						align: 'center',
						templet: function(d){
							if(!d.documentTime) return '';
							var date = new Date(d.documentTime);
							return date.getFullYear() + '-' +
								   (date.getMonth() + 1).toString().padStart(2, '0') + '-' +
								   date.getDate().toString().padStart(2, '0');
						}
					},
					{fixed:'right',title:'操作',width:160,toolbar:'#operationBar'},
				]],

			});

			// 监听工具条事件
			table.on('tool(table_row)', function(obj){ // 注意：table_row 是表格的elem属性值
				var data = obj.data; // 获取当前行数据
				var layEvent = obj.event; // 获取lay-event对应的值

				if(layEvent === 'edit'){ // 编辑操作
					// 跳转到编辑页面，并传递当前行数据
					console.log(111)
					editData(data);
				} else if(layEvent === 'look'){ // 查看操作
					// 查看详情逻辑
				}
			});

			// 编辑数据函数
			function editData(data) {
				//console.log(data)
				// 将数据转换为JSON字符串
				var dataStr = JSON.stringify(data);
				// 使用localStorage或sessionStorage临时存储数据
				sessionStorage.setItem('editData', dataStr);
				// 跳转到编辑页面
				window.location.href = 'PreturnorderUpd'; // 替换为你的编辑页面B的实际路径
			}


			// 加载数据函数
			function loadRoleData() {
				var params = {
					// material_code: $('[name="material_code"]').val(),
					// material_name: $('[name="material_name"]').val(),
					//begindate: $('[name="begindate"]').val(),
					//enddate: $('[name="enddate"]').val()
				};
				$.ajax({
					//url: 'http://localhost:5234/api/PurchaseInvoice/GetPreturnorder',
					url: "@ViewBag.BaseUrl/T7/PurchaseInvoice/GetPreturnorder",
					data: params,
					type: 'get',
					dataType: 'json',
					success: function (res) {
						console.log(res.data);
						layer.closeAll('loading');
						if (res.code === 0) {
							table.reload('BaseStoretable', {
								data: res.data,
							});
						}
						else {
							layer.msg('获取数据失败: ' + (res.message || '未知错误'), { icon: 2 });
						}
					},
					error: function (xhr, status, error) {
						layer.closeAll('loading');
						layer.msg('请求失败: ' + error, { icon: 2 });
						console.error('Ajax请求失败:', xhr.responseText);
					}
				});
			}

			// 搜索按钮点击事件
			form.on('submit(search)', function (data) {
				loadRoleData();
				return false; // 阻止表单跳转
			});
			

			// 重置按钮点击事件
			$('button[type="reset"]').on('click', function(){
				setTimeout(function(){
					loadRoleData();
				}, 100);
			});

			// 页面加载完成后获取数据
			loadRoleData();
		});
	</script>
	<!-- 表格操作列模板 -->
	<script type="text/html" id="operationBar">
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	</script>
</body>
</html>